<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: #304156">
      <!-- default-openeds属性指默认打开的栏目 -->
      <el-menu :default-openeds="[]">
        <el-submenu index="1" class="navigation">
          <template slot="title"
            ><i class="el-icon-message"></i>Statistics</template
          >
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="index1">Statistics</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2" class="navigation">
          <template slot="title"><i class="el-icon-menu"></i>Subject</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="index2">Enter</el-menu-item>
            <el-menu-item index="2-2" @click="index3">Modify</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3" class="navigation">
          <template slot="title"
            ><i class="el-icon-setting"></i>Student</template
          >
          <el-menu-item-group>
            <el-menu-item index="3-1" @click="index4">Score Entry</el-menu-item>
            <el-menu-item index="3-2" @click="index5">Modify</el-menu-item>
            <el-menu-item index="3-3" @click="index6"
              >Enter Student</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header
        style="text-align: right; font-size: 12px;height: auto; margin-top: 10px;"
      >
        <el-row :gutter="15" style="margin-right: 50px; float: right;">
          <div class="grid-content">
            <div class="demo-type">
              <div>
                <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
              </div>
            </div>

            <el-dropdown :hide-on-click="false">
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown" :hide-after="0">
                
                <el-dropdown-item>
                  <el-popconfirm title="确认退出登录？">
                    <el-button slot="reference" style="border: none;" @click="exit"
                      >退出登录</el-button
                    >
                  </el-popconfirm>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-row>
      </el-header>
      <!--        主要内容部分-->
      <el-main style="max-height: 820px;">
        <!-- 页面tab栏 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="Statistics" name="first">

            <!-- 课程 -->
            <el-cascader
              style="width: 30vh;"
              :props="{ expandTrigger: 'hover' }"
              placeholder="请先选择课程"
              :options="options"
              clearable
              @change="handleChange_c1"
            ></el-cascader>

            <!-- 系部框 -->
            <el-cascader
              style="width: 30vh;"
              :props="{ expandTrigger: 'hover' }"
              placeholder="系部"
              :options="option"
              clearable
              @change="handleChange"
            ></el-cascader>

            <!-- 专业框 -->
            <el-cascader
              style="width: 30vh;"
              :props="{ expandTrigger: 'hover' }"
              placeholder="专业"
              :options="option_z"
              clearable
              @change="handleChange_z"
            ></el-cascader>

            <!-- 班级框 -->
            <el-cascader
              style="width: 30vh;"
              :props="{ expandTrigger: 'hover' }"
              placeholder="班级"
              :options="option_b"
              clearable
              @change="handleChange_b"
            ></el-cascader>
            
            <!-- 动态加载班级框 -->
            <!-- <el-cascader :props="props"></el-cascader> -->

            <el-divider style="margin-bottom: 10px;"></el-divider>
            <div class="datatop">
              <el-row :gutter="20" class="myData">
                <el-col :span="6">
                  <div>
                    <el-statistic title="最高/低分">
                      <template slot="formatter">
                        {{ grade_t.maxResult }}
                        <el-divider direction="vertical"></el-divider>
                        {{ grade_t.minResult }}
                      </template>
                    </el-statistic>
                  </div>
                </el-col>
                
                <el-col :span="6">
                  <div>
                    <el-statistic
                      group-separator=","
                      decimal-separator="."
                      :value="value1"
                      title="不及格人数"
                    >
                      <template slot="suffix">
                        <i class="el-icon-s-flag" style="color: red"></i>
                      </template>
                    </el-statistic>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div>
                    <el-statistic
                      group-separator=","
                      :precision="1"
                      :value="grade_t.avgResult"
                      title="平均分"
                    >
                    </el-statistic>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div
              id="myChart"
              style="width: 100%;height: 350px;margin-top: 40px;"
            ></div>
          </el-tab-pane>
          <!-- 2 binggo-->
          <el-tab-pane label="Enter" name="second">
            <div style="height: 100%; width: 100%;margin-top: 20px;">
              <el-form
                :model="courseForm"
                :rules="c_rules"
                ref="courseForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item
                  label="课程号"
                  prop="course_id"
                  style="width: 500px;"
                >
                  <el-input v-model="courseForm.course_id"></el-input>
                </el-form-item>
                <el-form-item
                  label="课程名"
                  prop="course_name"
                  style="width: 500px;"
                >
                  <el-input v-model="courseForm.course_name"></el-input>
                </el-form-item>
                <el-form-item
                  label="学分"
                  prop="course_credit"
                  style="width: 500px;"
                >
                <el-slider
                    v-model="courseForm.course_credit"
                    :step="0.5"
                    show-stops
                    :max="5"
                  >
                  </el-slider>
                  <!-- <el-input v-model="courseForm.course_credit"></el-input> -->
                </el-form-item>

                <el-form-item>
                  <el-button @click="submitForm('courseForm')" type="primary"
                    >确认</el-button
                  >
                  <el-button @click="resetForm('courseForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <!-- 3 -->
          <el-tab-pane label="Modify" name="third" >
            <el-table
              style="width: 100%; margin-top: 30px;"
              :data="CourseData"
              :border="true"
              height="560"
              :row-class-name="tableRowClassName"
            >
              <el-table-column label="cno" align="center">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.courseId }}</span>
                  <el-input v-show="row.edit" v-model="row.courseId"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="name" prop="courseName" align="center">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.courseName }}</span>
                  <el-input
                    v-show="row.edit"
                    v-model="row.courseName"
                  ></el-input>
                </template>
              </el-table-column>

             
              <el-table-column label="credit" prop="courseCredit" align="center">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.courseCredit }}</span>
                  <el-input
                    v-show="row.edit"
                    v-model="row.courseCredit"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column align="right">
                <template slot-scope="{ row }">
                  <div style="display: flex;justify-content: space-around ">
                    <el-button
                      size="mini"
                      @click="edit_c(row)"
                      type="primary"
                      plain
                      >Edit</el-button
                    >

                    <el-dropdown-item>
                      <el-popconfirm
                        title="确认删除？"
                        style="display: flex;"
                        @confirm="handleDelete_c(row)"
                      >
                        <el-button
                          slot="reference"
                          size="mini"
                          type="danger"
                          plain
                          >Delete</el-button
                        >
                      </el-popconfirm>
                    </el-dropdown-item>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 4 -->
          <el-tab-pane label="Score Entry" name="fourth">
            <div style="height: 100%; width: 100%;">
              <el-button
                type="primary"
                plain
                @click="ScoreEntryShow = !ScoreEntryShow"
                >单个添加</el-button
              >

              <!-- 单个添加界面 -->
              <el-form
                :model="ruleForm_g"
                :rules="rules_g"
                ref="ruleForm_g"
                label-width="100px"
                class="demo-ruleForm"
                style="margin-top: 80px;"
                v-show="ScoreEntryShow"
              >
                <el-form-item label="学号" prop="sno" style="width: 500px;">
                  <el-input v-model="ruleForm_g.sno"></el-input>
                </el-form-item>
                <el-form-item
                  label="课程ID"
                  prop="region2"
                  style="width: 500px;"
                >
                  <el-input v-model="ruleForm_g.region2"></el-input>
                </el-form-item>
                <el-form-item label="学期" prop="region" style="width: 500px;">
                  <el-input v-model="ruleForm_g.region"></el-input>
                </el-form-item>

                <el-form-item label="成绩" prop="grade" style="width: 500px;">
                  <el-input v-model="ruleForm_g.grade"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button @click="submitForm_g" type="primary"
                    >添加</el-button
                  >
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>

              <!-- 表界面 -->
              <div
                v-show="!ScoreEntryShow"
                style="margin-top: 20px;height: 100%;width: 100%;position: relative; "
              >
                <el-cascader
                  style="width: 30vh;"
                  :props="{ expandTrigger: 'hover' }"
                  placeholder="我的课程"
                  :options="options_4"
                  clearable
                  @change="handleChange_4"
                ></el-cascader>

                <div style="height: 100%;width: 100%;">
                  <el-empty
                    description="请选择科目"
                    style="width: 100%;min-height: 500px;margin-top: 10px;"
                    v-show="!ScoreEntyTbleShow"
                  ></el-empty>

                  <el-table
                    :data="tableData"
                    style="width: 100%;min-height: 500px;margin-top: 10px;"
                    height:400
                    v-show="ScoreEntyTbleShow"
                  >
                    <el-table-column label="sno" prop="studentId">
                      <template slot-scope="{ row }">
                        <span>{{ row.studentId }}</span>
                        
                      </template>
                    </el-table-column>
                    <el-table-column label="name" prop="studentName">
                      <template slot-scope="{ row }">
                        <span >{{ row.studentName }}</span>
                        
                      </template>
                    </el-table-column>
                    <el-table-column label="sex" prop="studentGender">
                      <template slot-scope="{ row }">
                        <span>{{ row.studentGender }}</span>
                        
                      </template>
                    </el-table-column>
                    <el-table-column label="classId" prop="studentClassId">
                      <template slot-scope="{ row }">
                        <span >{{ row.studentClassId }}</span>
                        
                      </template>
                    </el-table-column>
                    <el-table-column label="semester" prop="gradeSemester">
                      <template slot-scope="{ row }">
                        <span >{{ row.gradeSemester }}</span>
                        
                      </template>
                    </el-table-column>
                    <el-table-column label="gradeId" prop="gradeId">
                      <template slot-scope="{ row }">
                        <span>{{ row.gradeId }}</span>
                        
                      </template>
                    </el-table-column>
                    <el-table-column label="score" prop="gradeResult">
                      <template slot-scope="{ row }">
                        <span >{{ row.gradeResult }}</span>
                        
                      </template>
                    </el-table-column>

                    <el-table-column align="right">
                      <template slot="header" slot-scope="scope"> </template>

                      <template slot-scope="{ row }">
                        <div
                          style="display: flex;justify-content: space-around "
                        >
                          <el-button
                            size="mini"
                            @click="edit_s(row)"
                            type="primary"
                            plain
                            >Edit</el-button
                          >
                          <el-dropdown-item>
                            <el-popconfirm
                              title="确认删除？"
                              style="display: flex;"
                              @confirm="handleDelete_s(row)"
                            >
                              <el-button
                                slot="reference"
                                size="mini"
                                type="danger"
                                plain
                                >Delete</el-button
                              >
                            </el-popconfirm>
                          </el-dropdown-item>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 5 -->
          <el-tab-pane label="Student Modify" name="fifth">
            <!-- 表格部分-- -->
            <el-table
              id="SubjectTable"
              style="width: 100%;padding: 0; margin-top: 50px;"
              :data="tableData_s"
              :border="true"
              height="580"
              :row-class-name="tableRowClassName"
            >
              <el-table-column label="sno" prop="studentId">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.studentId }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.studentId"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="name" prop="studentName">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.studentName }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.studentName"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="sex" prop="studentGender">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.studentGender }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.studentGender"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="classId" prop="studentClassId">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.studentClassId }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.studentClassId"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search_stu"
                    size="mini"
                    placeholder="输入关键字搜索"
                    @change="search_s"
                  />
                </template>

                <template slot-scope="{ row }">
                  <div style="display: flex;justify-content: space-around ">
                    <el-button
                      size="mini"
                      @click="edit_s1(row)"
                      type="primary"
                      plain
                      >Edit</el-button
                    >
                    <!-- <button v-show="row.edit">确认</button> -->
                    <el-dropdown-item>
                      <el-popconfirm
                        title="确认删除？"
                        style="display: flex;"
                        @confirm="handleDelete_s(row)"
                      >
                        <el-button
                          slot="reference"
                          size="mini"
                          type="danger"
                          plain
                          >Delete</el-button
                        >
                      </el-popconfirm>
                    </el-dropdown-item>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 6 -->
          <el-tab-pane label="Enter Student" name="sixth">
            <div style="height: 100%; width: 100%;margin-top: 20px;">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="姓名" prop="name" style="width: 500px;">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="学号" prop="sno" style="width: 500px;">
                  <el-input v-model="ruleForm.sno"></el-input>
                </el-form-item>
                <el-form-item
                  label="密码"
                  prop="password"
                  style="width: 500px;"
                >
                  <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item
                  label="班级ID"
                  prop="classid"
                  style="width: 500px;"
                >
                  <el-input v-model="ruleForm.classid"></el-input>
                </el-form-item>

                <el-form-item label="出生日期" required style="width: 500px;">
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder="选择日期"
                        v-model="ruleForm.date1"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                </el-form-item>
                <el-form-item label="性别" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    <el-radio label="未知"></el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item>
                  <el-button @click="submitForm_s" type="primary"
                    >添加</el-button
                  >
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { t_request } from "../network/request";
import * as echarts from "echarts";
import axios from 'axios';
export default {
  name: "HomeView",
  data() {
    let id = 0;
    return {
      //4页面表格显示
      ScoreEntyTbleShow: false,
      ScoreEntryShow: false,
      option: [],

      // 动态加载下拉框选择班级查看成绩
      options : [],
      options_4 : [],
      option_z : [],
      option_b : [],
      // 教师id 从缓存取
      teacherId: "",

      // 成绩统计
      grade_t: [],

      // 添加学生表单提交及验证所需数据
      ruleForm: {
        name: "",
        date1: "",
        delivery: false,
        resource: "",
        sno: "",
        classid: "",
        password: ""
      },
      rules: {
        sno: [{ required: true, message: "请输入学号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        classid: [{ required: true, message: "请输入班级ID", trigger: "blur" }],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        resource: [{ required: true, message: "请选择性别", trigger: "change" }]
      },

      // 添加课程表单提交及验证所需数据
      courseForm: {
        course_id: "",
        course_name: "",
        course_credit: null
      },
      c_rules: {
        course_id: [
          { required: true, message: "请输入课程号", trigger: "blur" }
        ],
        course_name: [
          { required: true, message: "请输入课程名", trigger: "blur" }
        ],
        course_credit: [
          { required: true, message: "请输入学分", trigger: "blur" }
        ]
      },

      // 添加成绩表单提交及验证所需数据
      ruleForm_g: {
        sno: "",
        // 课程
        region2: "",
        // 学期
        region: "",
        grade: ""
      },
      rules_g: {
        sno: [{ required: true, message: "请输入学生学号", trigger: "blur" }],
        region2: [{ required: true, message: "请输入课程号", trigger: "blur" }],
        region: [{ required: true, message: "请输入学期", trigger: "blur" }],
        grade: [{ required: true, message: "请输入成绩", trigger: "blur" }]
      },
      // 数据
      //   like: true,
      value1: null,
      value2: 18,
    

      //?/
      dianji: 0,
      number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
      dataList: [
        { option: "Statistics" },
        { option: "Enter" },
        { option: "Modify" },
        { option: "Score Entry" },
        { option: "Student Modify" },
        { option: "Enter Student" }
      ],

      activeName: "first",
      // 抽屉打开参数
      drawer: false,
      direction: "rtl",
      // 按钮打开参数
      show3: false,
      show2: false,
      show1: false,
      search_stu: "",
      serch: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      a:null,
      b:null,


      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content"
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content"
        }
      ],
      tabIndex: 2,

      CourseData: [],

      tableData: [],
      tableData_s: []
    };
  },

  methods: {
    // 四条弹窗
    open1(mes) {
      this.$message({
        message: mes,
        type: "success"
      });
    },
    open2(mes) {
      this.$message({
        message: mes,
        type: "warning"
      });
    },

    open3(mes) {
      this.$message(mes);
    },

    open4(mes) {
      this.$message.error(mes);
    },
    // 课程表单提交事件
    submitForm() {
      let data1 = {
        teacherId: this.teacherId,
        courseId: this.courseForm.course_id,
        courseName: this.courseForm.course_name,
        courseCredit: this.courseForm.course_credit
      };
      t_request({
        url: "/teacher/insertCourseAndTeach",
        method: "post",
        data: data1
      })
        .then(res => {
          console.log(res);
          // 请求成功
          if (res.code == 200) {
            this.CourseData.push(data1);
            this.open1("Sucess!");
          } else if (res.code == 10003) {
            this.open2("No!");
          }
          // 请求失败
          else {
            this.open4("Error!");
          }
        })
        .catch(err => {
          this.open4("Error!");
        });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 学生表单提交事件
    submitForm_s() {
      function timeAdd0(num) {
        var str = num.toString();
        if (str.length <= 1) {
          str = "0" + str;
        }
        return str;
      }

      function formatterDate(date) {
        let result = new Date(date);
        return result;
      }

      var d = formatterDate(this.ruleForm.date1);

      //  = this.ruleForm.date1
      d =
        d.getFullYear() +
        "-" +
        timeAdd0(d.getMonth() + 1) +
        "-" +
        timeAdd0(d.getDate());
      this.ruleForm.date1 = d;

      console.log(d);
      let data2 = {
        studentId: this.ruleForm.sno,
        studentName: this.ruleForm.name,
        studentPassword: this.ruleForm.password,
        studentGender: this.ruleForm.resource,
        studentBirth: this.ruleForm.date1,
        studentClassId: this.ruleForm.classid
      }
      t_request({
        url: "/teacher/insertOne",
        method: "post",
        data: data2
      })
        .then(res => {
          console.log(res);
          // 请求成功
          if (res.code == 200) {
            this.tableData_s.push(data2);
            this.open1("Sucess!");
          }
          // 请求失败
          else {
            this.open4("Error!");
          }
        })
        .catch(err => {
          this.open4("Error!");
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 成绩表单提交事件
    submitForm_g() {
      t_request({
        url: "/teacher/insertGradeOne",
        method: "post",
        data: {
          studentId: this.ruleForm_g.sno,
          teacherId: this.teacherId,
          courseId: this.ruleForm_g.region2,
          gradeSemester: this.ruleForm_g.region,
          gradeResult: this.ruleForm_g.grade
        }
      })
        .then(res => {
          console.log(res);
          // 请求成功
          if (res.code == 200) {
            this.open1("Sucess!");
          } else if (res.code == 500) {
            this.open4("Error!");
          }
          // 请求失败
          else {
            this.open4("Error!");
          }
        })
        .catch(err => {
          this.open4("Error!");
        })
        .catch(err => {
          console.log(err);
        });
    },
   
    change() {
      console.log("我看看谁在用");
    },
    // 删除学生
    handleDelete_s(row) { 
      t_request({
        url: "/teacher/deleteByStudentId",
        method: "delete",
        data: {
          teacherId: this.teacherId,
          studentId: row.studentId
          // studentId:"S07689526"
        }
      }).then(res => {
          console.log(res);
          console.log(this.tableData_s);
          // 删除学生dom
          let id1 = this.tableData_s.findIndex(item => {
                  if (item.studentId == row.studentId) {
                      return true
                  }
          })
          this.tableData_s.splice(id1, 1)
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 删除课程
    handleDelete_c(row) {
      console.log(row.courseId);
      
      t_request({
        url: "/teacher/deleteTeach/" + this.teacherId + "/" + row.courseId,
        method: "delete"
      })
        .then(res => {
          console.log(res);
          // 删除课程dom
          let id = this.CourseData.findIndex(item => {
                  if (item.courseId == row.courseId) {
                      return true
                  }
          })
          this.CourseData.splice(id, 1)
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 学生模糊搜索
    search_s() {
      t_request({
        url: "/teacher/selectByName/" + this.search_stu,
        method: "get"
      })
        .then(res => {
          console.log(res);
          // 请求成功
          if (res.code == 200) {
            this.tableData_s = res.data;
            this.open1("Sucess!");
          }
          // 请求失败
          else {
            this.open4("Error!");
          }
        })
        .catch(err => {
          this.open4("Error!");
        });
    },

    // 修改学生信息
    edit_s(row) {
      this.$set(row, 'edit', !row.edit)
      console.log(row.edit)
      
      if (row.edit == false) {
        t_request({
          url: "/teacher/updateByTeacher",
          method: "post",
          data: {
            teacherId: this.teacherId,
            studentId: row.studentId,
            studentName: row.studentName,
            studentClassId: row.studentClassId
          }
        })
          .then(res => {
            console.log(res);
            // 请求成功
            if (res.code == 200) {
              this.open1("Sucess!");
            }
            else if (res.code == 10003) {
              this.open2("No!");
            }
            // 请求失败
            else {
              this.open4("Error!");
            }
          })
          .catch(err => {
            this.open4("Error!");
          });
      }
    },

    edit_s1(row) {
      this.$set(row, 'edit', !row.edit)
      console.log(row.edit)
      
      if (row.edit == false) {
        t_request({
          url: "/teacher/updateByTeacher",
          method: "post",
          data: {
            teacherId: this.teacherId,
            studentId: row.studentId,
            studentName: row.studentName,
            studentClassId: row.studentClassId
          }
        })
          .then(res => {
            console.log(res);
            // 请求成功
            if (res.code == 200) {
              this.open1("Sucess!");
            }
            else if (res.code == 10003) {
              this.open2("No!");
            }
            // 请求失败
            else {
              this.open4("Error!");
            }
          })
          .catch(err => {
            this.open4("Error!");
          });
      }
    },
    // 修改课程信息
    edit_c(row) {
      this.$set(row, 'edit', !row.edit)
      console.log(row.edit)
      if (row.edit == false) {
        t_request({
          url: "/teacher/updateCourse",
          method: "post",
          data: {
            courseId: row.courseId,
            courseName: row.courseName,
            courseCredit: row.courseCredit
          }
        })
          .then(res => {
            console.log(res);
            // 请求成功
            if (res.code == 200) {
              console.log(this.CourseData)
              this.open1("Sucess!");
            }
            else if (res.code == 10003) {
              this.open2("No!");
            }
            // 请求失败
            else {
              this.open4("Error!");
            }
          })
          .catch(err => {
            this.open4("Error!");
          });
      }
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
    tableRowClassName({ row, rowIndex }) {
      //   if (rowIndex === 1) {
      //     return "warning-row";
      //   } else if (rowIndex === 3) {
      //     return "success-row";
      //   }
      return "common-row";
    },
    // 页数显示方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 饼图
    initData() {
      console.log(this.grade_t.resultNine)
      let d1 =  this.grade_t.resultNine;
      var myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: {
          text: "学生成绩统计", //主标题
          // subtext: '纯属虚构',//副标题
          x: "center" //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          // bottom: "bottom",
          x: 'left',
          y: 'center',
          left:"20%",
          top:"20%",
          itemGap: 40,
          data: ["90-100", "80-89", "70-79", "60-69", "0-59"]
        },
        series: [
          {
            name: "成绩",
            type: "pie",
            radius: "80%",
            center: ["50%", "60%"],
            data: [
              { value: this.grade_t.resultNine, name: "90-100" },
              { value: this.grade_t.resultEight, name: "80-89" },
              { value: this.grade_t.resultSeven, name: "70-79" },
              { value: this.grade_t.resultSix, name: "60-69" },
              { value: this.value1, name: "0-59" }
            ],
            // data: [
            //   { value: d1, name: "90-100" },
            //   { value: 2, name: "80-89" },
            //   { value: 3, name: "70-79" },
            //   { value: 1, name: "60-69" },
            //   { value:2, name: "0-59" }
            // ],
            itemStyle: {
              //通常情况下：
              normal:{  
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多S于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(84,112,198)','rgb(145,204,117)','rgb(250,200,88)','rgb(115,192,222)','rgb(238,102,102)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时:
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    // 
    handleChange_c1(value) {
      this.a = value[0]
      console.log(this.a)
    },
    // 信息统计页面学期框
    async handleChange(value) {
      
      console.log("我点了一下")
      
      t_request({
        url: "/teacher/selectGradeByDepartmentId",
        method: "post",
        data:{
          departmentId:value[0],
          teacherId:this.teacherId,
          courseId:this.a
        }
      })
        .then(res => {
          console.log(res);
          // 请求成功
          if (res.code == 200) {
            // 按系部统计
            t_request({
                url: "/teacher/selectGradeByDepartmentId",
                method: "post",
                data:{
                  departmentId:value[0],
                  teacherId:this.teacherId,
                  courseId:this.a
                }
              })
                .then(res => {
                  console.log(res);
                  // 请求成功
                  if (res.code == 200) {
                    this.grade_t = res.data
                    this.value1 = this.grade_t.resultOne+
                      this.grade_t.resultTwo+
                      this.grade_t.resultThree+
                      this.grade_t.resultFour+
                      this.grade_t.resultFive
                    this.initData()
                  }
                  // 请求失败
                  else {
                    console.log("error");
                  }
                })
                .catch(err => {
                  // this.open4(err);
                });

                
            // 下一个框渲染请求
            t_request({
                url: "/teacher/selectMajorByDepartment/" + value[0],
                method: "get"
              })
                .then(res => {
                  console.log(res);
                  // 请求成功
                  if (res.code == 200) {
                    
                    res.data.forEach(element => {
                      this.option_z.push({
                        value: element.majorId,
                        label: element.majorName
                      });
                    });
                    console.log(this.option_z)
                  }
                  // 请求失败
                  else {
                    console.log("error");
                  }
                })
                .catch(err => {
                  this.open4("Error!");
                });
          }
          // 请求失败
          else {
            console.log("error");
          }
        })
        .catch(err => {
          this.open4(err+"handleChange");
        });
  
    },

    handleChange_z(value){
        this.b = value[0]
        console.log(value[0])
        t_request({
                      url: "/teacher/selectClassByMajor/" + value[0],
                      method: "get"
                    })
                      .then(res => {
                        console.log(res);
                        // 请求成功
                        // 按专业统计
            t_request({
                url: "/teacher/selectGradeByMajorId",
                method: "post",
                data:{
                  majorId:value[0],
                  teacherId:this.teacherId,
                  courseId:this.a
                }
              })
                .then(res => {
                  console.log(res);
                  // 请求成功
                  if (res.code == 200) {
                    this.grade_t = res.data
                    this.value1 = this.grade_t.resultOne+
                      this.grade_t.resultTwo+
                      this.grade_t.resultThree+
                      this.grade_t.resultFour+
                      this.grade_t.resultFive
                    this.initData()
                  }
                  // 请求失败
                  else {
                    console.log("error");
                  }
                })
                .catch(err => {
                  // this.open4(err+"handleChange_z1");
                });

                this.option_b = []
            // 下一个框渲染请求
                        if (res.code == 200) {
                          
                          res.data.forEach(element => {
                            this.option_b.push({
                              value: element.classId,
                              label: element.className
                            });
                          });
                          console.log(this.option_b)
                        }
                        // 请求失败
                        else {
                          console.log("error");
                        }
                      })
                      .catch(err => {
                        // this.open4(err+"handleChange_z2");
                      });

    },

    handleChange_b(value){
      // 按班级统计
            t_request({
                url: "/teacher/selectGradeByClassId",
                method: "post",
                data:{
                  classId:value[0],
                  teacherId:this.teacherId,
                  courseId:this.a
                }
              })
                .then(res => {
                  console.log(res);
                  // 请求成功
                  if (res.code == 200) {
                    this.grade_t = res.data
                    this.value1 = this.grade_t.resultOne+
                      this.grade_t.resultTwo+
                      this.grade_t.resultThree+
                      this.grade_t.resultFour+
                      this.grade_t.resultFive
                    this.initData()
                  }
                  // 请求失败
                  else {
                    console.log("error");
                  }
                })
                .catch(err => {
                  // this.open4(err+"handleChange_b");
                });

                
            // 下一个框渲染请求
    },
    //4页面
    handleChange_4(value) {
      this.ScoreEntyTbleShow = true;
      console.log(value[0]);
      if (value[0] == undefined) {

        this.ScoreEntyTbleShow = false;

      } else {
        t_request({
          url:
            "teacher/selectByTeacherIdAndCourseId/" +
            this.teacherId +
            "/" +
            value[0],
          method: "get"
        }).then(res => {
          console.log(res);
          // 请求成功
          if (res.code == 200) {
            this.tableData = res.data;
          }
        });
      }
    },

    // 清空缓存退出登录
    exit() {
      localStorage.clear();
      this.$router.push({ path: "/superLogin" });
    },
    //定义切换方法
    tab(index) {
      this.number = index;
      console.log(index, this.number);
    },
    index1() {
      this.number = 0;
      this.activeName = "first";
    },
    index2() {
      this.number = 1;
      this.activeName = "second";
    },
    index3() {
      this.activeName = "third";
      this.number = 2;
    },
    index4() {
      this.activeName = "fourth";
      this.number = 3;
    },
    index5() {
      this.activeName = "fifth";
      this.number = 4;
    },
    index6() {
      this.activeName = "sixth";
      this.number = 5;
    }
  },
  mounted() {
    this.CourseData = JSON.parse(window.sessionStorage.getItem("teacherinfo"));
    this.teacherId = JSON.parse(localStorage.getItem("teacherid"));
    console.log(this.CourseData);

    this.CourseData.forEach(element => {
      this.options_4.push({
        value: element.courseId,
        label: element.courseName
      });
      this.options.push({
        value: element.courseId,
        label: element.courseName
      });
    });

    // 信息统计
    t_request({
      url: "/teacher/selectDepartment",
      method: "get"
    })
      .then(res => {
        console.log(res);
        // 请求成功
        if (res.code == 200) {
          res.data.forEach(element => {
            this.option.push({
              value: element.departmentId,
              label: element.departmentName
            });
          });
          console.log(this.option)
        }
        // 请求失败
        else {
          console.log("error");
        }
      })
      .catch(err => {
        this.open4("Error!");
      });
    // this.options.push(option_x1)
    console.log(this.options);

    this.initData();

    // 学生信息全局
    t_request({
      url: "/teacher/selectByName/",
      method: "get"
    })
      .then(res => {
        console.log(res);
        // 请求成功
        if (res.code == 200) {
          this.tableData = res.data;
          this.tableData_s = res.data;
        }
        // 请求失败
        else {
          console.log("error");
        }
      })
      .catch(err => {
        this.open4("Error!");
      });
  }
};
</script>

<style>
.myData {
  font-size: larger;
  display: flex;
  justify-content: space-around;
}
.el-table {
  .el-button {
    width: 56px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .common-row {
  /* height: 30px; */
  padding: 0;
  font-size: smaller;
  /* background-color: #7191b7; */
}
.el-table .success-row {
  background: #f0f9eb;
}
/* 抽屉背景样式 */
.el-drawer ltr {
  background-color: #304156;
}
.el-row.el-menu {
  display: flex;
  background-color: #304156;
  /* max-width: 100px; */
}
.el-row.el-drawer__header,
.el-drawer__body {
  background-color: #304156;
}
el-aside,
.el-row.el-drawer__body {
  background-color: #304156;
  border: none;
  max-width: 100px;
}
.el-row.el-submenu__title {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* 最高低分按钮显示样式 */
.transition-box {
  margin-bottom: 10px;
  width: 150px;
  height: 50px;
  border-radius: 4px;
  background-color: #2b5c99;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-family: "PMZD"; */

  /* padding: 30px 10px; */
  box-sizing: border-box;
  margin-right: 20px;
}
/* 页数显示样式 */
.block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.marginTop {
  margin-top: 20px;
}
.el-aside {
  padding-top: 140px;
  border: none;
}
.el-menu-item-group {
  background-color: #2d3a4b;
}
.navigation:hover {
  background-color: #7191b7;
}
.navigation {
  background-color: #304156;
}
.el-submenu .el-menu-item {
  color: #fff;
  font-family: "PMZD";
}
.el-submenu__title {
  color: #fff;
  font-family: "PMZD";
}

/* 布局demo  顶部栏 */
.grid-content {
  font-size: 30px;
  border-radius: 5px;
  min-height: 50px;
  display: flex;
  align-items: end;
}

/* tarbar样式 */
.content {
  display: flex;
  /* width: 1000px; */
  /* display: inline; */
  border-bottom: 0.5px solid #e4e7ed;
  /* background-color: #409eff; */
}
.btn {
  width: 150px;
  height: 40px;
  border: 0;
  color: #909399;
  padding: 0;
  /* margin: 20px 0px; */
  background-color: #fff;
  border-top: #e4e7ed 1px solid;
  border-left: #e4e7ed 1px solid;
  border-right: #e4e7ed 1px solid;
  border-bottom: #e4e7ed 0.5px solid;
}

/*选中时*/
.btn1 {
  width: 150px;
  height: 40px;
  border: none;
  /* border: #e4e7ed 1px solid; */
  border-top: #e4e7ed 1px solid;
  border-left: #e4e7ed 1px solid;
  border-right: #e4e7ed 1px solid;

  /* border-bottom: 10px solid #df4747; */
  /* color: rgb(17, 17, 17); */
  color: #409eff;
  /* margin: 20px 0px; */
  background-color: #fff;
  padding: 0;
}

#content1,
#content2,
#content3,
#content4,
#content5,
#content6 {
  /* background-color: #fff;
  height: 660px;
  font-size: 16px;
  line-height: 40px; */
  margin-top: 20px;
}
</style>
